<template>
	<view class="mPage">
		<!-- <view style="position: sticky;top: 0;z-index: 6;">
			<uni-nav-bar leftIcon="left" title="服务预约" statusBar :border="false" backgroundColor="#26A0FF"
				@clickLeft="handleBack" color="#ffffff"></uni-nav-bar>
		</view> -->

		<view class="shop-item">
			<image class="item-cover" :src="mShopDetails.cover" mode="aspectFill"></image>
			<view class="item-content">
				<text class="item-name">{{mShopDetails.store_name}}</text>
				<view class="item-loction-box">
					<image class="item-icon" src="/static/ic_list_loction.png" mode="widthFix"></image>
					<text class="item-desc">{{mShopDetails.address}}</text>
				</view>
				<view class="btn-view">
					<view class="btn-desc-box">
						<view class="item-desc-box">
							<image class="item-icon" src="/static/ic_list_time.png" mode="widthFix"></image>
							<text class="item-desc">{{mShopDetails.work_time}}</text>
						</view>
					</view>
					<text class="item-stutas">预约过</text>
				</view>
			</view>
		</view>

		<view class="service-Items">
			<view class="base-title-box">
				<image src="/subpages/static/ic_fwxm.png" mode="widthFix"></image>
				<text>服务项目</text>
			</view>
			<view style="height: 20rpx;" />
			<u-scroll-list :indicator="false">
				<view v-for="(item,index) in serviceItems" :key="index"
					:class="['service-item',itemCode == item.code ? 'active' : '']" @click="checkServiceIndex(item)">
					<text>{{item.name}}</text>
				</view>
			</u-scroll-list>
		</view>

		<view class="arrival-Times">
			<view class="base-title-box">
				<image src="/subpages/static/ic_ddsj.png" mode="widthFix"></image>
				<text>到店时间</text>
			</view>
			<view class="date-view">
				<view class="date-list-box">
					<u-scroll-list :indicator="false">
						<view v-for="(item,index) in dateItems" :key="index">
							<view :class="['date-item',selectedDate == item.fulldate ? 'active' : '']"
								@click="checkDateIndex(index)">
								<text>{{item.title}}</text>
								<text>{{item.dateStr}}</text>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view class="all-date-btn" @click="openCalendar">
					<image src="/subpages/static/ic_qbrq.png" mode="heightFix"></image>
					<text>日期</text>
				</view>
			</view>
			<!-- 		<view class="date-type-menu">
				<view :class="['date-type-item',selectedDateTypeIndex == 0 ? 'active' : '']" @click="checkDateType(0)">
					<image src="/subpages/static/ic_bt.png" mode="heightFix"></image>
					<text>白天 09:30-18:30</text>
				</view>
				<view style="width: 2rpx;height: 23rpx;background: #E1E1E1;">

				</view>
				<view :class="['date-type-item',selectedDateTypeIndex == 1 ? 'active' : '']" @click="checkDateType(1)">
					<image src="/subpages/static/ic_ws.png" mode="heightFix"></image>
					<text>晚上 19:30-21:00</text>
				</view>
			</view> -->
			<view v-if="emptyTimeItems == false" style="margin:10rpx;">
				<uni-grid :column="4" :highlight="true" :showBorder="false" :square="false" @change="checkTimeIndex">
					<uni-grid-item v-for="(item, index) in timeItems" :index="index" :key="index">
						<view
							:class="['arrival-item',item.disEnable ? 'disEnable' : '', selectedTimeIndex == index ? 'active' : '',]">
							<text
								:class="['arrival-item-txt',item.disEnable ? 'disEnableTxt' : '', selectedTimeIndex == index ? 'activeTxt' : '',]">{{item.start_time}}</text>
							<text
								:class="['arrival-item-sub',item.disEnable ? 'disEnableSub' : '', selectedTimeIndex == index ? 'activeSub' : '',]">{{item.tips || '休息'}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view v-else class="emptyTimeItems-view">
				<image src="/subpages/static/ic_xxbkyy.png" mode="heightFix"></image>
				<text>今日休息，不可预约</text>
			</view>
		</view>


		<view class="user-data">
			<view class="base-title-box" style="margin-bottom: 20rpx;">
				<image src="/subpages/static/ic_yyrxx.png" mode="widthFix"></image>
				<text>预约人信息</text>
			</view>
			<view class="input-item">
				<text class="title">预约人</text>
				<view class="input-view">
					<u-input v-model="userName" :maxlength="8" placeholder="请输入" inputAlign="left" clearable />
				</view>
			</view>
			<view class="input-item">
				<text class="title">联系方式</text>
				<view class="input-view">
					<u-input v-model="phone" type="number" :maxlength="11" placeholder="请输入" inputAlign="left"
						clearable />
				</view>
			</view>

			<view class="input-item">
				<text class="title">订单号</text>
				<view class="input-view">
					<u-input v-model="orderNo" placeholder="选填" inputAlign="left" clearable />
				</view>
			</view>
			<view class="input-item">
				<text class="title">备注</text>
				<view class="input-view">
					<u-input v-model="mark" placeholder="请输入" inputAlign="left" clearable />
				</view>
			</view>
		</view>

		<text class="bottom-btn" @click="book">立即预约</text>
		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :insert="false" :lunar="true"
			:date="selectedDate" :startDate="startDate" :endDate="endDate" @confirm="confirm" @close="close" />

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		navigateTo
	} from '@/utils/util.js'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		bookProject,
		getProjectItemList,
		getProjectItemTimes
	} from '@/api/index.js'
	import moment from 'moment';
	import 'moment/dist/locale/zh-cn';
	moment.locale("zh-cn");

	const startDate = moment().format("YYYY-MM-DD");
	const endDate = moment().add(60, 'days').format('YYYY-MM-DD');
	const selectedDate = ref(moment().format("YYYY-MM-DD"));
	const selectedDateTypeIndex = ref(0)
	const selectedServiceIndex = ref(0)
	const selectedDateIndex = ref(0)
	const selectedTimeIndex = ref(0)
	const showCalendar = ref(false)
	const calendar = ref()

	const openCalendar = () => {
		calendar.value.open()
	}
	const confirm = (e) => {
		console.log('confirm 返回:', e.fulldate)
		selectedDate.value = e.fulldate
	}
	const serviceItems = ref(['洗剪吹', '烫发', '染发', '护理', '染发', '护理', '烫发', '染发', '护理', '染发', '护理'])

	const dateItems = ref([{
		title: '今天',
		dateStr: '11-04'
	}, {
		title: '明天',
		dateStr: '11-05'
	}, {
		title: '星期三',
		dateStr: '11-06'
	}, {
		title: '星期四',
		dateStr: '11-07'
	}, {
		title: '星期五',
		dateStr: '11-08'
	}, {
		title: '星期六',
		dateStr: '11-09'
	}, {
		title: '星期日',
		dateStr: '11-10'
	}])
	const timeItems = ref([]);


	const userName = ref('')
	const phone = ref('')
	const orderNo = ref('')
	const mark = ref('')
	const mBookDetails = ref({})
	const mDetails = ref({})
	const mShopDetails = ref({})
	const itemCode = ref('')
	const emptyTimeItems = ref(false)

	const generateDateList = () => {
		dateItems.value = []; // 清空之前的日期列表
		const today = moment().startOf('day');
		const tomorrow = moment().startOf('day').add(1, 'day');
		const endDate = today.clone().add(30, 'days').startOf('day');

		let currentDate = today.clone();

		while (currentDate.isSameOrBefore(endDate)) {
			let title = '';
			const dateStr = currentDate.format('YYYY-MM-DD');
			const dateObj = currentDate.toObject();

			if (currentDate.isSame(today)) {
				title = '今天';
			} else if (currentDate.isSame(tomorrow)) {
				title = '明天';
			} else {
				title = currentDate.format('dddd'); // 获取星期几
			}

			const dateDisplay = `${dateObj.months + 1}-${dateObj.date}`;

			dateItems.value.push({
				title: title,
				dateStr: dateDisplay,
				fulldate: moment(dateObj).format('YYYY-MM-DD')
			});

			currentDate = currentDate.add(1, 'day');
		}
	};
	const getProjectData = async () => {
		let res = await getProjectItemList({
			store_sn: mShopDetails.value.store_sn
		})
		if (res?.code) {
			console.log(res.data);
			serviceItems.value = res.data ?? []
			if (serviceItems.length && !itemCode.value) {
				itemCode.value = serviceItems.value[0].code
			}
		}
	}
	const getBookData = async () => {
		let res = await getProjectItemTimes({
			item_code: itemCode.value,
			order_date: selectedDate.value
		})
		console.log(res);
		if (res?.code) {
			console.log(res.data);
			mBookDetails.value = res.data ?? [];
			var timeList = mBookDetails.value.times ?? [];
			for (var i = 0; i < timeList.length; i++) {
				var item = timeList[i];
				if (item.num && item.num == -1) {
					item['tips'] = "休息"
					item.disEnable = true;
				} else if (!item.num || item.num == 0) {
					item['tips'] = "约满"
					item.disEnable = true;
				} else {
					item['tips'] = `余${item.num}`
					item.disEnable = false;
				}
			}
			timeItems.value = timeList;
			emptyTimeItems.value = false;
		} else {
			timeItems.value = [];
			selectedTimeIndex.value = 0;
			emptyTimeItems.value = true;
		}
	}

	const book = async () => {
		if (!timeItems.value.length) {
			return
		}
		let res = await bookProject({
			item_code: itemCode.value,
			order_date: selectedDate.value,
			order_time: timeItems.value[selectedTimeIndex.value].start_time,
			user_name: userName.value,
			user_phone: phone.value,
			order_remark: mark.value,
			order_no: orderNo.value
		})
		if (res?.code) {
			uni.setStorageSync('tempOrderDetails', res.data)
			toBookDetails();
		}
	}
	const handleBack = () => {
		uni.navigateBack()
	}

	const checkServiceIndex = (item) => {
		itemCode.value = item.code;
		getBookData();
	}
	const checkDateIndex = (index) => {
		selectedDateIndex.value = index;
		selectedDate.value = dateItems.value[index].fulldate
		getBookData();
	}
	const checkTimeIndex = (e) => {
		let {
			index
		} = e.detail
		if (timeItems.value[index].disEnable)
			return
		selectedTimeIndex.value = index;
	};


	const checkDateType = (index) => {
		selectedDateTypeIndex.value = index;
		if (selectedDateTypeIndex.value == 0) {
			timeItems.value = timeBtItems.value;
		} else {
			timeItems.value = timeWsItems.value;
		}
	};

	const toBookDetails = () => {
		navigateTo({
			url: `/subpages/pages/bookDetails/index`
		})
	}

	onLoad((options) => {
		// checkDateType(selectedDateTypeIndex.value)

		mDetails.value = uni.getStorageSync("tempDetails");
		mShopDetails.value = uni.getStorageSync("tempShopDetails");
		itemCode.value = mDetails.value?.code;
		console.log("mDetails=>", mDetails.value);
		console.log("mShopDetails=>", mShopDetails.value);
		generateDateList();
		getProjectData();
		getBookData();
	});
</script>

<style lang="scss" scoped>
	.shop-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx #EFEFEF;


		&:first-child {
			border-top-right-radius: 0;
			border-top-left-radius: 0;
		}

		&:active {
			opacity: 0.7;
		}

		.item-desc-box {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.item-cover {
			display: block;
			border-radius: 15rpx;
			width: 118rpx;
			height: 118rpx;
			margin: 25rpx 0 25rpx 25rpx;
			overflow: hidden;
		}

		.item-content {
			margin-left: 18rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.item-icon {
			width: 18rpx;
			height: 18rpx;
			margin-right: 6rpx;
		}

		.btn-view {
			display: flex;
			margin-top: 9rpx;
			flex-direction: row;
			align-items: center;
			margin-right: 24rpx;
		}

		.btn-desc-box {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.item-stutas {
			font-size: 24rpx;
			color: #F8B54F;
		}

		.item-name {
			font-size: 28rpx;
			color: #151515;
			font-weight: bold;
		}

		.item-desc {
			font-size: 24rpx;
			color: #7A7A7A;
		}
	}

	.base-title-box {
		display: flex;
		margin-top: 20rpx;
		flex-direction: row;
		align-items: center;

		image {
			margin-left: 25rpx;
			width: 26rpx;
			height: 26rpx;
			display: block;
		}

		text {
			margin-left: 10rpx;
			font-size: 30rpx;
			color: #151515;
			font-weight: 500;
		}
	}

	.service-Items {
		display: flex;
		flex-direction: column;
		background: white;

		.service-item {
			padding: 12rpx 25rpx;
			font-size: 26rpx;
			color: #151515;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			white-space: nowrap;
			background: #F5F5F5;
			border-radius: 8rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;

			&+.service-item {
				margin-left: 0;
			}

			&.active {
				color: white;
				background: linear-gradient(180deg, #4ECEFF 0%, #26A0FF 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(42, 164, 255, 0.44);
			}
		}
	}


	.arrival-Times {
		display: flex;
		flex-direction: column;
		background: white;
		margin-top: 20rpx;

		.date-item {
			width: 109rpx;
			height: 109rpx;
			background: #F5F5F5;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #151515;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&.active {
				color: white;
				background: linear-gradient(180deg, #4ECEFF 0%, #26A0FF 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(42, 164, 255, 0.44);
			}

			&.disEnable {
				color: #999999;
				background: #F5F5F5;
				box-shadow: none;
			}
		}

		.date-view {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
			display: flex;
			align-items: center;
			flex-direction: row;
		}

		.date-list-box {
			width: calc(100% - 140rpx);
		}

		.all-date-btn {
			width: 140rpx;
			background: white;
			height: 109rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 33rpx;
				height: 33rpx;
			}

			text {
				margin-top: 6rpx;
				font-size: 24rpx;
				color: #151515;
			}

			&:active {
				opacity: 0.7;
			}
		}

		.date-type-menu {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;

			.date-type-item {
				flex: 1;
				display: flex;
				flex-direction: row;
				padding: 10rpx 0;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #151515;

				image {
					width: 22rpx;
					height: 22rpx;
				}

				text {
					margin-left: 8rpx;
				}

				&.active {
					color: #0088F2;
				}
			}
		}

		.emptyTimeItems-view {
			width: 697rpx;
			height: 271rpx;
			background: #FBFBFB;
			border-radius: 8rpx;
			margin: 30rpx auto 40rpx auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			image {
				width: 29rpx;
				height: 26rpx;
			}

			text {
				margin-left: 8rpx;
				font-size: 24rpx;
				color: #767676;
			}
		}


		.arrival-item {
			width: 159rpx;
			margin: 10rpx auto;
			height: 77rpx;
			background: white;
			border-radius: 8rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #EAEAEA;

			&.active {
				border-color: rgba(42, 164, 255, 0.44);
				background: linear-gradient(180deg, #4ECEFF 0%, #26A0FF 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(42, 164, 255, 0.44);
			}

			&.disEnable {
				background: #F5F5F5;
				box-shadow: none;
				border-color: #F5F5F5;
			}

			.arrival-item-txt {
				font-size: 28rpx;
				color: #1B2229;

				&.activeTxt {
					color: white;
				}

				&.disEnableTxt {
					color: #999999;
				}
			}

			.arrival-item-sub {
				font-size: 20rpx;
				margin-left: 10rpx;
				color: #B8B8B8;

				&.activeSub {
					color: white;
				}

				&.disEnableSub {
					color: #999999;
				}
			}
		}
	}

	.user-data {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: white;
		margin-bottom: calc(env(safe-area-inset-bottom) + 152rpx);
		margin-top: 20rpx;

		.input-item {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.title {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			width: 120rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-weight: 500;
			margin-right: 20rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #181818;
		}

		.input-view {
			flex: 1;
			border-bottom: 1rpx solid #EDEDED;
		}
	}

	.bottom-btn {
		position: fixed;
		z-index: 10;
		left: 25rpx;
		right: 25rpx;
		width: 700rpx;
		bottom: calc(env(safe-area-inset-bottom) + 28rpx);
		height: 96rpx;
		background: #26A0FF;
		border-radius: 48rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		font-weight: 500;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		&:active {
			opacity: 0.7;
		}
	}
</style>